<template>
    <div>
        <el-table
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                @selection-change="selectionChange"
                :data="ArticleData"
                style="width: 100%">
            <el-table-column
                    v-if="edit || del || recover"
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="文章标题">
                <template slot-scope="scope">
                    <el-button @click="go2Details(scope.row.id)" type="text" size="small">{{ scope.row.title }}</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="category.cname"
                    label="从属类别">
            </el-table-column>
            <el-table-column
                    v-if="!personal"
                    prop="author.nickname"
                    label="作者">
            </el-table-column>
            <el-table-column
                    v-if="personal"
                    prop="userBean.nickname"
                    label="作者">
            </el-table-column>
            <el-table-column
                    label="文章状态">
                <template slot-scope="scope">
                    <el-tag size="small" type="success" v-if="scope.row.status == 1">已发布</el-tag>
                    <el-tag size="small" type="primary" v-if="scope.row.status == 2">草稿箱</el-tag>
                    <el-tag size="small" type="warning" v-if="scope.row.status == 3">回收站</el-tag>
                    <el-tag size="small" type="danger" v-if="scope.row.status == 4">类别禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="publishTime"
                    label="发布时间"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" v-if="edit || del || recover">
                <template slot-scope="scope">
                    <el-button
                            v-if="edit"
                            size="mini"
                            @click="go2EditAricle(scope.row.id)">编辑
                    </el-button>
                    <el-button
                            v-if="recover"
                            size="mini"
                            @click="">恢复成草稿
                    </el-button>
                    <el-button
                            v-if="del"
                            size="mini"
                            type="danger"
                            @click="">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <div>
            <el-button v-if="del" size="mini" type="danger" :disabled="multiDelBtn">批量删除</el-button>
        </div>
        <br>
        <el-pagination
                @current-change="currentChange"
                background
                layout="prev, pager, next"
                :current-page="pageNum"
                :page-size="pageSize"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "ArticleInfos",
        data() {
            return {
                aStatus : '0',
                pageSize : 5,
                pageNum : 1,
                keyWords : '',
                loading: true,
                total : 0,
                multiDelBtn : true,
                ArticleData: []
            }
        },
        methods: {
            go2Details(id) {
                this.$router.push({
                    path : '/ArticleDetails',
                    query :{
                        id : id,
                        status : this.status
                    }
                })
            },
            go2EditAricle(id) {
                this.$router.push({
                    path : '/PublishArticle',
                    query :{
                        id : id
                    }
                })
            },
            currentChangeinitArticleInfos() {
                this.$getRequest('/article/?keyWords='+this.keyWords+'&pageNum='+this.pageNum+'&pageSize='+this.pageSize+'&status='+this.status).then(resp => {
                    if(resp){
                        this.ArticleData = resp.list;
                        this.total = resp.total;
                        this.loading = false;
                    }
                });
            },
            currentChange(pageNum){ // 分页回调
                this.pageNum = pageNum;
                this.currentChangeinitArticleInfos();
            },
            selectionChange(selection) { // 复选框回调
                this.multiDelBtn = selection.length == 0;
            },
            initArticleInfos(keyWords) { // 查询文章信息
                if (keyWords != null) {
                    this.keyWords = keyWords;
                }
                this.pageNum = 1;
                this.currentChangeinitArticleInfos();
            }
        },
        mounted(){
            this.initArticleInfos();
            if (this.$route.query.id && this.$route.query.status) {
                alert(this.$route.query.id+","+this.$route.query.status)
            }
        },
        props: ['edit', 'del', 'recover','personal','status']
    }
</script>

<style scoped>

</style>